<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试阿富汗</title>
    <!-- leaflet。js的基础依赖 -->
    <link rel="stylesheet" type="text/css" href="leafletJs/leaflet.css">
    <script type="text/javascript" src="leafletJs/leaflet-src.js"></script>
    <script type="text/javascript" src="lmjs/initMap.js"></script>
    <script type="text/javascript" src="lmjs/setMapStytle.js"></script>
    <!--    样式js文件-->
    <script type="text/javascript" src="lmjs/mapStyle.js"></script>
    <!--	下面这个是依赖服务器上的js-->
<!--        <script type="text/javascript" src="http://192.168.0.142:9090/js/lmJs/lmBase.js"></script>-->
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
        }

        html,
        body,
        #map {
            height: 100%;
            /* background-color: rgba(23, 27, 241, 0.1); */
        }

    </style>
</head>

<body>
<!--  style="background-color: #191970;" -->
<div id='map'></div>
</body>
<script type="text/javascript">



    // var map = L.initMap('map', {zoom: 9,mapStyle: mapStyle.blue});
    // L.marker([34.694, 113.587], {title: "hahah", riseOnHover: true}).addTo(map)
    //     .bindPopup('Hello world ~')
    //     .openPopup().bindTooltip("my tooltip text").openTooltip();

    /*
    可以通过以下方式实现自定义样式
     */
    var map = L.map("map", {
        center: [34.59449400,70.08439200],
        // renderer: L.svg(),
        zoom: 11,
        zoomControl: false, // + -号放大缩小
        attributionControl: false // 右下角leaflet.js图标
    });
    L.marker([34.59449400,70.08439200], {title: "hahah", riseOnHover: true}).bindPopup('<p>阿富汗</p><p>经度: 70.08439200</p><p>纬度: 34.59449400</p>')
        .openPopup().addTo(map)
    // //googlemaps/satellite/{z}/{x}/{y}.png
    L.tileLayer("googlemaps/satellite/{z}/{x}/{y}.jpg", {
        maxZoom: 20,
        minZoom: 3,
    }).addTo(map);
    L.tileLayer("googlemaps/overlay/{z}/{x}/{y}.png", {
        maxZoom: 20,
        minZoom: 3,
    }).addTo(map);
</script>

</html>